<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
progress{ width:99%; }
textarea{ width:98vw; height:50vh; }
#filetype{border:1px solid gray;padding:0px 5px;}
#msg{padding-left:1em;}
</style>
<title>base64</title>
</head>
<body>
<input type=file id=inputfile> <span id=filetype>文件类型</span> <span id=msg></span><br>
<progress id=progress value=0 max=100></progress>
<textarea id=textarea></textarea><br>
<p id=view></p>
<p>http://www.jianshu.com/p/90fc1f9042a8</p>
<script>
var view = document.getElementById('view');
var msg = document.getElementById('msg');
var textarea = document.getElementById('textarea');
var filetype = document.getElementById('filetype');
var inputfile = document.getElementById('inputfile');
inputfile.addEventListener('change',readFile,false);
var time_start,timer;
var progress = document.getElementById('progress');

function readFile(){	
	time_start = new Date();
	timer = setInterval('timerCount()',100);
	view.innerHTML = '';
	textarea.textContent = '转换中...';
	var file = this.files[0];
	filetype.textContent = file.type;	
	var reader = new FileReader();
	reader.readAsDataURL(file);	
	
	reader.onload = function(){
		textarea.textContent = this.result;		
		if(file.type.startsWith('image')){
			var element = document.createElement('img');
			element.src = this.result;
			view.appendChild(element);
		}else{
			if(file.type.startsWith('video')){
				var element = document.createElement('video');
				element.controls = 'controls';
				element.src = this.result;
				view.appendChild(element);
			}else{
				if(file.type.startsWith('audio')){
					var element = document.createElement('audio');
					element.controls = 'controls';
					element.src = this.result;
					view.appendChild(element);
				}
			}
		}		
		clearInterval(timer);
		progress.value = 100;		
	}
	
	reader.onprogress = function(e){				
		//console.log(e.loaded);
		var pv = e.loaded*100/file.size;
		progress.value = pv;
	}
	
	
}

function timerCount(){
	var time_now = new Date();
	console.log(time_now);
	msg.textContent = ' ' + (time_now.getTime() - time_start.getTime()) + ' 毫秒';
}
</script>
</body>
</html>